<form
  role="form"
  name="queryBarForm"
  ng-submit="queryBar.submit()"
>
  <div class="typeahead" kbn-typeahead="{{queryBar.typeaheadKey()}}" on-select="queryBar.submit()" role="search">
    <div class="kuiLocalSearch">

      <!-- Lucene input -->
      <div class="kuiLocalSearchAssistedInput" ng-if="queryBar.localQuery.language === 'lucene'">
        <input
          parse-query
          input-focus
          disable-input-focus="queryBar.disableAutoFocus"
          kbn-typeahead-input
          ng-model="queryBar.localQuery.query"
          placeholder="Search... (e.g. status:200 AND extension:PHP)"
          aria-label="Search input"
          aria-describedby="discoverLuceneSyntaxHint"
          type="text"
          class="kuiLocalSearchInput kuiLocalSearchInput--lucene"
          ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
          data-test-subj="queryInput"
        >
        <div class="kuiLocalSearchAssistedInput__assistance">
          <p class="kuiText">
            <a
              id="discoverLuceneSyntaxHint"
              class="kuiLink"
              documentation-href="query.luceneQuerySyntax"
              target="_blank"
              rel="noopener noreferrer"
            >
              Uses lucene query syntax
            </a>
          </p>
        </div>
      </div>

      <!-- kuery input -->
      <div class="kuiLocalSearchAssistedInput" ng-if="queryBar.localQuery.language === 'kuery'">
        <input
          ng-model="queryBar.localQuery.query"
          input-focus
          disable-input-focus="queryBar.disableAutoFocus"
          kbn-typeahead-input
          placeholder="Search... (e.g. status:200 AND extension:PHP)"
          aria-label="Search input"
          aria-describedby="discoverKuerySyntaxHint"
          type="text"
          class="kuiLocalSearchInput kuiLocalSearchInput--kuery"
          ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
          data-test-subj="queryInput"
        >
        <div class="kuiLocalSearchAssistedInput__assistance">
          <p class="kuiText">
            <a
              id="discoverKuerySyntaxHint"
              class="kuiLink"
              documentation-href="query.kueryQuerySyntax"
              target="_blank"
              rel="noopener noreferrer"
            >
              Uses kuery syntax
            </a>
          </p>
        </div>
      </div>

      <select
        class="kuiLocalSearchSelect"
        ng-options="option for option in queryBar.availableQueryLanguages"
        ng-model="queryBar.localQuery.language"
        ng-change="queryBar.selectLanguage()"
        ng-if="queryBar.showLanguageSwitcher"
        data-test-subj="queryBarLanguageSwitcher"
      >
      </select>

      <button
        type="submit"
        aria-label="Search"
        class="kuiLocalSearchButton"
        ng-disabled="queryBarForm.$invalid"
        data-test-subj="querySubmitButton"
      >
        <span class="fa fa-search" aria-hidden="true"></span>
      </button>
    </div>
    <kbn-typeahead-items></kbn-typeahead-items>
  </div>
</form>
